<template>
    <div class="view">
        <nav-bar title="通知设置" :fixed="false" :shadow="true">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="setting-wrap">
            <cube-scroll>
                <template v-if="settingNotification !==''">
                    <list-cell title="文字消息提示" :showArrow="false" :showRightSlot="true">
                        <div class="notification-switch" slot="rightSlot">
                            <cube-switch v-model="settingNotification.say"></cube-switch>
                        </div>
                    </list-cell>
                    <list-cell title="图片消息提示" :showArrow="false" :showRightSlot="true">
                        <div class="notification-switch" slot="rightSlot">
                            <cube-switch v-model="settingNotification.say_img"></cube-switch>
                        </div>
                    </list-cell>
                    <list-cell title="收到礼物提示" :showArrow="false" :showRightSlot="true">
                        <div class="notification-switch" slot="rightSlot">
                            <cube-switch v-model="settingNotification.gift"></cube-switch>
                        </div>
                    </list-cell>
                    <list-cell title="APP下载提示" :showBorder="false" style="margin-top: 12px;" v-if="!device.status" :showArrow="false" :showRightSlot="true">
                        <div class="notification-switch" slot="rightSlot">
                            <cube-switch v-model="settingDownload"></cube-switch>
                        </div>
                    </list-cell>
                </template>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import Badge from "@/components/aui/Badge.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import CommonUnit from "@/unit/CommonUnit";
    import Input from "cube-ui/src/components/input/input.vue";
    import {InterfaceSocket} from "@/interface/InterfaceSocket";
    import ListCell from "@/components/aui/ListCell.vue";
    import NavBar from "@/components/aui/NavBar.vue";
    import {settingDownload} from "@/store/dispatches";

    @Component({
        components: {
            NavBar, ListCell
        }
    })
    export default class SettingNotification extends Scene {

        @State("SettingStore")
        private setting!: any;

        @State("DeviceStore")
        private device!: any;

        private back() {
            this.navigateBack();
        }

        private get settingNotification(): any {
            return this.setting.notification || "";
        }

        private get settingDownload(): boolean {
            return this.setting.download || "";
        }

        private set settingDownload(value: boolean) {
            settingDownload(value);
        }
    }
</script>

<style scoped lang="stylus">

    .view
        height 100vh;
        width 100vw;
        background $theme-page-common-background-color;

        .setting-wrap
            width 100vw;
            height calc(100vh - var(--safe-area-inset-top) - 44px);
            position relative;
            border-top 1px solid rgba(200, 199, 204, .1);
</style>
